<template>
  <div class="jkdaxx">
    <p style="text-align: center; margin-top: 15px">
      <span style="font-weight: 700; font-size: 28px; color: #000"
        >居民健康档案信息卡</span
      >
    </p>
    <table class="tab_sty_3" cellspacing="0" style="width: 100%">
      <tr>
        <th>姓名</th>
        <td>{{ info.residentName }}</td>
        <th>性别</th>
        <td>{{ info.gender | six}}</td>
        <th>出生日期</th>
        <td>{{ info.dataBirth }}</td>
        <th>健康档案编号</th>
        <td style="width: 86%">
          <span
            v-for="(item, index) in 档案号"
            :key="index"
            :class="item == '-' ? 'no_bd' : 'yes_bd'"
            >{{ item }}</span
          >
        </td>
        <th>ABO血型</th>
        <td style="width: 42%">
          <el-radio-group v-model="info.bloodType" class="radio_sty">
            <el-radio label="1" disabled>A</el-radio>
            <el-radio label="2" disabled>B</el-radio>
            <el-radio label="3" disabled>O</el-radio>
            <el-radio label="4" disabled>AB</el-radio>
          </el-radio-group>
        </td>
        <th>RH血型</th>
        <td style="width: 31%">
          <el-radio-group v-model="info.rhRegative" class="radio_sty">
            <el-radio label="1" disabled>Rh阴性</el-radio>
            <el-radio label="2" disabled>Rh阳性</el-radio>
            <el-radio label="3" disabled>不详</el-radio>
          </el-radio-group>
        </td>
        <th style="width: 99%">慢性病患病情况</th>
        <td style="width: 99%">
          <el-checkbox-group v-model="info.groupType" class="radio_sty">
            <el-checkbox label="1" disabled>无</el-checkbox>
            <el-checkbox label="16" disabled>高血压</el-checkbox>
            <el-checkbox label="32" disabled>糖尿病</el-checkbox>
            <el-checkbox label="99" disabled>脑卒中</el-checkbox>
            <el-checkbox label="99" disabled>冠心病</el-checkbox>
            <el-checkbox label="99" disabled>哮喘</el-checkbox>
            <el-checkbox label="99" disabled>职业病</el-checkbox>
            <el-checkbox label="99" disabled>其他疾病</el-checkbox>
          </el-checkbox-group>
        </td>
        <th style="width: 99%">过敏史</th>
        <td style="width: 99%">
          <el-checkbox-group v-model="info.medicineAllergy" class="radio_sty">
            <el-checkbox label="1" disabled>无</el-checkbox>
            <el-checkbox label="2" disabled>青霉素</el-checkbox>
            <el-checkbox label="3" disabled>磺胺</el-checkbox>
            <el-checkbox label="4" disabled>链霉素</el-checkbox>
            <el-checkbox label="5" disabled>其他</el-checkbox>
          </el-checkbox-group>
        </td>
      </tr>
    </table>
    <table class="tab_sty" cellspacing="0" style="width: 100%">
      <tr style="margin-top: 30px; display: inline-block">
        <th>家庭住址</th>
        <td>{{ info.nowAddress }}</td>
        <th>家庭电话</th>
        <td>{{ info.telephone }}</td>
        <th>紧急情况联系人</th>
        <td>{{ info.contactName }}</td>
        <th>联系人电话</th>
        <td>{{ info.contactPhone }}</td>
        <th>建档机构名称</th>
        <td>{{ info.createUnitName }}</td>
        <th>联系电话</th>
        <td>-</td>
        <th>责任医生或护士</th>
        <td>{{ info.dutyUserName }}</td>
        <th>联系电话</th>
        <td>-</td>
        <th style="width: 100%">其他说明</th>
        <td style="width: 100%"></td>
      </tr>
    </table>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      info: {},
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
      档案号: "530721-205-105-00293",
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      var data = {
        idNo: localStorage.getItem("idCard"),
      };
      this.$post("/resident/list?idNo=" + data.idNo).then((res) => {
        this.info = res.data[0];
        this.info.groupType =  [...this.info.groupType.toString()];
        this.info.medicineAllergy =  [...this.info.medicineAllergy.toString()];
       
      });
    },
  },
  filters:{
    six(val) {
      var six = "";
      if (val == 1) {
        six = "男";
        return six;
      }
      if (val == 2) {
        six = "女";
        return six;
      } else {
        six = "未知";
        return six;
      }
    },
  }
};
</script>
  
  <style scoped lang="scss">
.jkdaxx {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
  .tab_sty {
    border-collapse: collapse;
    th {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 15%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      background-color: #fafafa;
      border: 1px solid rgb(217, 217, 217);
    }
    td {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 35%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      border: 1px solid rgb(217, 217, 217);
      text-align: left;
    }
    .no_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
    }
    .yes_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
      border: 1px solid #000;
    }
  }
  .tab_sty_3 {
    border-collapse: collapse;
    th {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 13%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      background-color: #fafafa;
      border: 1px solid rgb(217, 217, 217);
    }
    td {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 20%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      border: 1px solid rgb(217, 217, 217);
      text-align: left;
    }
    .no_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
    }
    .yes_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
      border: 1px solid #000;
    }
  }
  .no_bdb {
    td {
      border-bottom: none;
    }
  }
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #000;
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: #fff;
}
::v-deep .el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #fff;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  color: #000;
}
</style>